<template>
  <div class="content">
    <div class="main">
      <el-scrollbar>
        <div v-for="item in blogList" :key="item.blogId">
          <BlogItem
            :cover="item.cover"
            :title="item.title"
            :summary="item.summary"
            :nickName="item.nickName"
            :createTime="item.createTime"
            :categoryName="item.categoryName"
            :blogId="item.blogId"
            :categoryId="item.categoryId"
            :userId="item.userId"
          />
        </div>
      </el-scrollbar>
    </div>
    <el-pagination
      :current-page="pageInfo.pageNo"
      :page-size="10"
      background
      layout="total, prev, pager, next, jumper"
      :total="pageInfo.totalCount"
      @current-change="handleCurrentChange"
    />
  </div>

  <div class="nav" :span="6">
    <el-scrollbar>
      <!-- 分类 -->
      <div class="category">
        <div class="header">
          <div class="title">分类专栏</div>
          <div class="btn">
            <el-button size="small" round @click="toCategory">
              更多<el-icon><DArrowRight /></el-icon>
            </el-button>
          </div>
        </div>
        <div class="body" v-for="item in categoryList" :key="item.categoryId">
          <div class="cover">
            <el-image style="width: 60px; height: 60px" :src="proxy.imageUrl+item.cover" fit="fill"  @click="toCategoryDetail(item.categoryId)"/>
          </div>
          <div class="title" @click="toCategoryDetail(item.categoryId)">{{ item.categoryName }}</div>
          <div class="count">{{ item.blogCount }}篇</div>
        </div>
      </div>
      <!-- 专题 -->
      <div class="special">
        <div class="header">
          <div class="title">专题</div>
          <div class="btn">
            <el-button size="small" round @click="toSpecial">
              更多<el-icon><DArrowRight /></el-icon>
            </el-button>
          </div>
        </div>
        <div class="body" v-for="item in specialList" :key="item.categoryId">
          <div class="cover">
            <el-image style="width: 60px; height: 60px" :src="proxy.imageUrl+item.cover" fit="fill" @click="toSpecialDetail(item.categoryId)" />
          </div>
          <div class="title" @click="toSpecialDetail(item.categoryId)">{{ item.categoryName }}</div>
          <div class="count">{{ item.blogCount }}篇</div>
        </div>
      </div>
      <!-- 成员 -->
      <div class="users">
        <div class="header">
          <div class="title">博客成员</div>
          <div class="btn">
            <el-button size="small" round @click="toUsers">
              更多<el-icon><DArrowRight /></el-icon>
            </el-button>
          </div>
        </div>
        <div class="body" v-for="item in userList" :key="item.userId">
          <div class="avatar">
            <el-avatar style="width: 60px; height: 60px" :src="proxy.imageUrl+item.avatar" fit="fill" @click="toUserDetail(item.userId)" />
          </div>
          <div class="info">
            <div class="name" @click="toUserDetail(item.userId)">{{ item.nickName }}</div>
            <div class="profession">{{ item.profession }}</div>
          </div>
          <div class="count">{{ item.blogCount }}篇</div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import bus from '../utils/EventBus'

const { proxy } = getCurrentInstance();
const router=useRouter()

// 部署前执行
onBeforeMount(() => {
  getBlogList();
  getCategoryList();
  getSpecialList();
  getUserList();
});
// 获取博客列表
const blogList = ref([]);
const getBlogList = async () => {
  let result = await proxy.Request({
    url: "/view/loadBlogList",
    params: {
      pageNo: pageInfo.pageNo,
      pageSize: 10
    },
  });
  if (!result) {
    return;
  }
  blogList.value = result.data.list;
  pageInfo.pageNo = result.data.pageNo;
  pageInfo.totalCount = result.data.totalCount;
};

// 页码
const pageInfo = reactive({
  pageNo: 1,
  totalCount: 0,
});
// 页码改变
const handleCurrentChange = (val) => {
  pageInfo.pageNo = val;
  getBlogList();
};

// 获取分类列表
const categoryList = ref([]);
const getCategoryList = async () => {
  let result = await proxy.Request({
    url: "/view/loadCategory",
    params: {
      pageSize: 3,
    },
  });
  if (!result) {
    return;
  }
  categoryList.value = result.data;
};

// 获取专题列表
const specialList = ref([]);
const getSpecialList = async () => {
  let result = await proxy.Request({
    url: "/view/loadSpecial",
    params: {
      pageSize: 3,
    },
  });
  if (!result) {
    return;
  }
  specialList.value = result.data.list;
};

// 获取成员列表
const userList = ref([]);
const getUserList = async () => {
  let result = await proxy.Request({
    url: "/view/loadTeamUser",
    params: {
      pageSize: 3,
    },
  });
  if (!result) {
    return;
  }
  userList.value = result.data;
};

// 跳转分类
const toCategory = ()=>{
  router.push("../category");
  bus.emit("toCategory");
}

// 跳转分类详情
const toCategoryDetail = (categoryId)=>{
  router.push("../category/" + categoryId);
  bus.emit("toCategory");
}

// 跳转用户
const toUsers = ()=>{
  router.push("../users");
  bus.emit("toUser");
}

// 跳转用户详情
const toUserDetail = (userId) => {
  router.push("../user/" + userId);
  bus.emit("toUser");
};

// 跳转专题
const toSpecial = ()=>{
  router.push("../special");
  bus.emit("toSpecial");
}

// 跳转专题详情
const toSpecialDetail = (categoryId) => {
  router.push("../special/" + categoryId);
  bus.emit("toSpecial");
};
</script>

<style lang="scss" scoped>
.content {
  width: 70%;
  padding: 10px;
  min-width: 630px;
  max-height: calc(100vh - 140px);
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 2px 6px 0 #ddd;
  border-radius: 10px;

  .main {
    margin-bottom: 8px;
    height: calc(100vh - 200px);
    box-sizing: border-box;
  }
}

.nav {
  padding: 10px;
  margin-left: 10px;
  max-height: calc(100vh - 140px);
  min-width: 250px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 2px 6px 0 #ddd;
  border-radius: 10px;

  .category,.special,.users{
    display: flex;
    flex-direction: column;

    .header{
      margin: 5px 0;
      margin-right: 10px;
      display: flex;
      justify-content: space-between;
      height: 30px;
      font-size: 20px;
      line-height: 25px;
      border-bottom: 2px solid #ddd;

      .title{
        cursor: default;
      }
    }

    .body{
      margin: 5px 0;
      height: 60px;
      padding-right: 15px;
      display: flex;
      align-items: center;

      .cover,.avatar{
        cursor: pointer;
      }

      .title,.info{
        margin-left: 5px;
        display: flex;
        flex: 1;
      }

      .title{
        font-size: 15px;
        color: #79bbff;
        cursor: pointer;
      }

      .info{
        display: flex;
        flex-direction: column;

        .name{
          height: 30px;
          font-size: 20px;
          line-height: 30px;
          color: #79bbff;
          cursor: pointer;
        }
        
        .profession{
          height: 30px;
          font-size: 16px;
          opacity: .7;
          cursor: default;
        }
      }

      .count{
        font-size: 13px;
        opacity: .5;
        cursor: default;
      }
    }
  }
}
</style>